<template>
  <div class="video">
    <div class="vide-input-top">
      <el-button
        slot="append"
        icon="el-icon-plus"
        @click="addInput"></el-button>
    </div>
    <div class="vide-input">
      <div
        class="vide-input-div"
        v-for="(item, index) in vList"
        :key="index">
        <el-select
          v-model="item.v1"
          placeholder="请选择"
          clearable
          ><el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"></el-option
        ></el-select>
        <el-select
          v-if="item.v1 !== 3"
          v-model="item.v2"
          placeholder="请选择"
          clearable
          ><el-option
            v-for="item in rules"
            :key="item.value"
            :label="item.label"
            :value="item.value"></el-option
        ></el-select>
        <el-input
          type="number"
          clearable
          v-model="item.day">
          <template slot="append">{{
            item.v1 === 1 ? '次' : item.v1 === 2 ? '$' : item.v1 === 3 ? '天' : ''
          }}</template></el-input
        >
        <el-button
          slot="append"
          icon="el-icon-minus"
          @click="delInput(index)"></el-button>
      </div>
    </div>
  </div>
</template>

<script>
import { deepClone } from '@/utils'
export default {
  data() {
    return {
      vList: [],
      options: [
        { value: 1, label: '有效购买次数' },
        { value: 2, label: '有效购买金额' },
        { value: 3, label: '近X天无购买' },
      ],
      rules: [
        { value: 'eq', label: '等于' },
        { value: 'gt', label: '大于' },
        { value: 'lt', label: '小于' },
      ],
    }
  },
  props: {
    value: {
      type: Array,
      default() {
        return []
      },
    },
  },
  watch: {
    value: {
      handler(newVal) {
        this.vList = newVal
      },
      deep: true,
    },
    vList: {
      handler(newVal) {
        this.$emit('input', newVal)
      },
      deep: true,
    },
  },
  mounted() {
    this.vList = this.value
  },
  methods: {
    addInput() {
      this.vList.push({
        v1: '',
        v2: '',
        day: '',
      })
    },
    delInput(index) {
      this.vList.splice(index, 1)
    },
  },
}
</script>

<style lang="scss" scoped>
.video {
  width: 100%;
  display: block;
}
.vide-input-top {
  display: flex;
  margin-bottom: 8px;
}
.vide-input {
  width: 100%;
  .vide-input-div {
    display: flex;
    margin-bottom: 8px;

    .tip {
    }
  }
}
.video-button {
  margin-left: 10px;
}
</style>
